<template>
    <div>
        <van-nav-bar title="所有影院" left-text="返回" left-arrow ref="topnavbar" @click-left="handleCity" @click-right="handleSearch">
        <template #right>
            <van-icon name="search" size="18" />
        </template>
        <template #left>
            {{ $store.state.cityName }}<van-icon name="arrow-down" />
        </template>
        </van-nav-bar>
        <div class="wrapper" >
            <ul class="content" :style="{height:theheight}">
                <li v-for="data in cinemaslist" :key="data.cinemaId" class="onecinema">
                <div class="textarea">
                    <div class="cinemaname">{{ data.name }}</div>
                    <div class="cinemaaddres">{{ data.address }}</div>
                </div>
                <div class="price">
                    <div>￥{{ data.lowPrice/100 }}起</div>
                </div>
            </li>
            </ul>
        </div>
    </div>
</template>

<script>
import tabbar from '@/Components/apps/Tabbar.vue'
import BetterScroll from 'better-scroll'
import { mapActions,mapMutations,mapState } from 'vuex'
export default {
    components:{
        tabbar
    },
    computed:{
        ...mapState(['cinemaslist'])
    }
    ,
    mounted(){
        // 分发
        if(this.cinemaslist.length === 0){
            this.$store.dispatch('getCity').then(res=>{
                this.thisCityId = this.$store.state.cityId
                this.theheight = document.documentElement.clientHeight - document.querySelector('footer').offsetHeight - this.$refs.topnavbar.$el.offsetHeight +'px'
                new BetterScroll('.wrapper',{
                })
                console.log(this.$store.state.nowCityId !== this.$store.state.lastCityId)
            })
        }else{
            this.$nextTick(()=>{
                console.log(this.$refs.topnavbar.$el.offsetHeight)
                this.theheight = document.documentElement.clientHeight - document.querySelector('footer').offsetHeight - this.$refs.topnavbar.$el.offsetHeight +'px'
                new BetterScroll('.wrapper',{
                })
            })
        }
        if(this.$store.state.nowCityId !== this.$store.state.lastCityId){
            this.$store.dispatch('getCity').then(res=>{
                console.log(2)
            })
        }
    },
    data(){
        return{
            theheight: ''
        }
    },
    methods:{
        ...mapActions(['getCity']),
        ...mapMutations(['changeCity']),
        handleCity(){
            this.$router.push('/city')
        },
        handleSearch(){
            this.$router.push('/search')
        }
    }
}
</script>
<style lang="scss" scoped>
ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.textarea{
    width: 2.6rem;
    height: 0.45rem;
    padding-right: 15px;
    float: left;
}
.price{
    width: 0.7rem;
    height: 0.45rem;
    float: left;
    font-size: 15px;
    color: orangered;
}
.onecinema{
    height: 0.455rem;
    padding: 15px;
}
.cinemaname{
    width: 2.8rem;
    font-size: 15px;
}
.cinemaaddres{
    font-size: 12px;
    margin-top: 5px;
    width: 2.12rem;
    height: 0.18rem;
    color: gray;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>